<template>
  <div class="app-container">
    <div class="filter-container">

      <el-button v-loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                 @click="exportHtml()">
        导出HTML
      </el-button>

      <el-button v-loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                 @click="exportPdf()">
        导出PDF
      </el-button>

      <!--      <el-button v-loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"-->
      <!--                 @click="exportWord">-->
      <!--        导出WORD-->
      <!--      </el-button>-->

      <el-button v-loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                 @click="insertTable()">
        插入表格
      </el-button>
      <el-button v-loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                 @click="insertChart()">
        插入图表
      </el-button>
    </div>
    <template>
      <editor ref="toastuiEditor" style="height: 400px;"/>
    </template>
  </div>
</template>

<script>
import 'codemirror/lib/codemirror.css';
import '@toast-ui/editor/dist/toastui-editor.css';

import {Editor} from '@toast-ui/vue-editor';
import {exportPdf, exportHtml} from "@/api/report";

export default {
  components: {
    editor: Editor,
  },
  data() {
    return {
      downloadLoading: false,
      content: null,
      html: '',
      htmlTitle: "PDF报表",
      nowTime: "",
    }
  },
  created() {

  },
  methods: {
    scroll() {
      this.$refs.toastuiEditor.invoke('scrollTop', 10);
    },
    moveTop() {
      this.$refs.toastuiEditor.invoke('moveCursorToStart');
    },
    getHtml() {
      let html = this.$refs.toastuiEditor.invoke('getHtml');
      return html;
    },

    exportHtml() {
      this.downloadLoading = true,
          exportHtml(this.getHtml()).then((res) => {
            if (!res) {
              this.$notify({
                title: '失败',
                message: '报表生成失败',
                type: 'error',
                duration: 2000
              });
              return;
            }
            let blob = new Blob([res], {
              type: 'application/zip'
            })
            let fileName = Date.parse(new Date()) + '.zip'
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, fileName)
            } else {
              let link = document.createElement('a')
              link.href = window.URL.createObjectURL(blob)
              link.download = fileName
              link.click()
              this.dialogFormVisible = false
              //释放内存
              window.URL.revokeObjectURL(link.href)
              this.downloadLoading = false
            }
          })
    },

    exportPdf() {
      this.downloadLoading = true,
          exportPdf(this.getHtml()).then((res) => {
            if (!res) {
              this.$notify({
                title: '失败',
                message: '报表生成失败',
                type: 'error',
                duration: 2000
              });
              return;
            }
            let blob = new Blob([res], {
              type: 'application/pdf'
            })
            let fileName = Date.parse(new Date()) + '.pdf'
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, fileName)
            } else {
              let link = document.createElement('a')
              link.href = window.URL.createObjectURL(blob)
              link.download = fileName
              link.click()
              this.dialogFormVisible = false
              //释放内存
              window.URL.revokeObjectURL(link.href)
              this.downloadLoading = false
            }
          })
    },


    //添加图片到markdown
    insertChart() {
      let editor = this.$refs.toastuiEditor.invoke("getCodeMirror");
      //通过替换markdown内容来添加图片
      editor.replaceSelection(`![image]()\n`);
    },
    //添加表格到markdown
    insertTable() {
      let editor = this.$refs.toastuiEditor.invoke("getCodeMirror");
      //通过替换markdown内容来添加图片
      editor.replaceSelection(`| 123 |  123|\n| --- | --- |\n|123  | 123 |\n| 123 |  123|\n`)
    }
  }
}
</script>

